<template>
  <div class="page">
    <div class="nav">
      <mu-button class="btn_box" flat>
        <mu-icon right value="keyboard_backspace"></mu-icon>
      </mu-button>
      <mu-button class="top_title" disabled flat>爱上打扫打扫的</mu-button>
      <mu-button class="btn_box" flat>
        <mu-icon right value="menu"></mu-icon>
      </mu-button>
    </div>

    <div class="chat_box">

    </div>

    <div class="input_box">
      <div class="text-input">
        <textarea v-model="sendMsg"/>
      </div>

      <mu-button class="sendBtn" color="primary">发送
        <mu-icon right value="send"></mu-icon>
      </mu-button>

    </div>

  </div>
</template>

<script>
  export default {
    name: "chatting",
    data() {
      return {
        sendMsg: ''
      }
    }
  }
</script>

<style scoped>
  .page {
    width: 100%;
    height: 100vh;
  }

  .nav {
    width: 100%;
    height: 7vh;
    background-color: #2196f3;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .chat_box {
    width: 100%;
    height: 82vh;
    margin: 10px auto;
    background-image: url("../../assets/1000556.jpg");
    background-size: cover;
  }

  .input_box {
    width: 100%;
    height: 7vh;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .text-input {
    width: 65%;
    height: 100%;
  }

  .text-input textarea {
    width: 100%;
    height: 100%;
    background-color: #2196f3;
    color: white;
  }

  .sendBtn {
    width: 30%;
    height: 100%;
  }

  .btn_box {
    width: 20%;
    height: 100%;
    color: white;
  }

  .top_title {
    width: 50%;
    height: 100%;
    color: white;
  }
</style>
